<template>
	<view class="address-form">
		<base-navbar back-color="#fff" title="收款账户"></base-navbar>
		<view class="form">
			<view class="form-item">
				<text class="label"><text class="star">*</text>账户类型</text>
				<view class="form-input">
					<radio-group @change="radioChange">
						<label class="radio" v-for="(item,index) in accountType" :key="index">
							<radio :value="item.value" :color="themeColor.theme" :checked="item.value==form.account_type" />
							{{item.name}}
						</label>
					</radio-group>
				</view>
			</view>
			<view v-if="form.account_type==0">
				<view class="form-item">
					<text class="label"><text class="star">*</text>持卡人姓名</text>
					<view class="form-input">
						<input class="input-val" v-model="form.username" type="text" placeholder="填写持卡人姓名" />
					</view>
				</view>
				<view class="form-item">
					<text class="label"><text class="star">*</text>银行卡号</text>
					<view class="form-input">
						<input class="input-val" v-model="form.account" type="text" placeholder="填写银行卡号" />
					</view>
				</view>
			</view>
			<view v-else>
				<view class="form-item">
					<text class="label"><text class="star">*</text>联系人姓名</text>
					<view class="form-input">
						<input class="input-val" v-model="form.username" type="text" placeholder="填写联系人姓名" />
					</view>
				</view>
				<view class="form-item">
					<text class="label"><text class="star">*</text>收款账号</text>
					<view class="form-input">
						<input class="input-val" v-model="form.account" type="text" placeholder="填写收款账号" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<text class="label"><text class="star">*</text>手机号</text>
				<view class="form-input">
					<input class="input-val" v-model="form.mobile" type="text" placeholder="绑定手机号" />
				</view>
			</view>
			<view v-if="form.account_type==0">
				<view class="form-item">
					<text class="label"><text class="star">*</text>开户行</text>
					<view class="form-input">
						<input class="input-val" v-model="form.bank_name" type="text" placeholder="开户行" />
					</view>
				</view>
				<view class="form-item">
					<text class="label"><text class="star">*</text>支行名称</text>
					<view class="form-input">
						<input class="input-val" v-model="form.bank_branch" type="text" placeholder="支行名称" />
					</view>
				</view>
				<view class="form-item">
					<text class="label"><text class="star">*</text>银行卡图片</text>
					<uni-file-picker v-model="cardImage" fileMediatype="image" mode="grid" :limit="1"
						@select="selectImage" @success="uploadSuccess" @fail="uploadFail" />
				</view>
			</view>
			<view v-else-if="form.account_type==1">
				<view class="form-item">
					<text class="label"><text class="star">*</text>微信收款码</text>
					<uni-file-picker v-model="wechatImage" fileMediatype="image" mode="grid" :limit="1"
						@select="selectImage" @success="uploadSuccess" @fail="uploadFail" />
				</view>
			</view>
			<view v-else-if="form.account_type==2">
				<view class="form-item">
					<text class="label"><text class="star">*</text>支付宝收款码</text>
					<uni-file-picker v-model="alipayImage" fileMediatype="image" mode="grid" :limit="1"
						@select="selectImage" @success="uploadSuccess" @fail="uploadFail" />
				</view>
			</view>
			<view class="form-item">
				<text class="label default">设为默认</text>
				<switch class="switch" :color="themeColor.theme" :checked="form.is_default" @change="chooseDefault"></switch>
			</view>

			<view class="btn-submit">
				<c-button :style="{background: themeColor.theme}" block @click="save()">立即提交</c-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		accountType: [{
			name: '银行卡',
			value: '0',
		}, {
			name: '微信',
			value: '1',
		}, {
			name: '支付宝',
			value: '2',
		}], //认证类型数组
		form: {
			account_type: '0', //认证类型，0银行卡，1微信，2支付宝
			username: "", //联系人
			mobile: "", //联系电话
			account: "", //账户
			bank_name: "", //开户行
			bank_branch: "", //支行名称
			pay_card_image: "", //银行卡图片
			wechat_qr_code: "", //微信收款码
			alipay_qr_code: "", //支付宝收款码
			is_default: false,
		},
		cardImage: [], //
		wechatImage: [], //
		alipayImage: [], //
		account_id: 0,
	});

	onLoad((opt) => {
		if (opt.hasOwnProperty('account_id')) {
			state.account_id = opt.account_id;
			getAccountInfo();
		}
	});

	function getAccountInfo() {
		request.get('memberpayment/getAccountInfo', {
			id: state.account_id,
		}).then(res => {
			state.form = res.data;
			if (form.account_type == 0) {
				state.cardImage = [{
					name: "cardImage.png",
					extname: "png",
					url: res.data.pay_card_image,
				}];
			} else if (form.account_type == 1) {
				state.wechatImage = [{
					name: "wechatImage.png",
					extname: "png",
					url: res.data.wechat_qr_code,
				}];
			} else if (form.account_type == 2) {
				state.alipayImage = [{
					name: "alipayImage.png",
					extname: "png",
					url: res.data.alipay_qr_code,
				}];
			}
		})
	}

	function chooseDefault(e) {
		if (e.detail.value == true) {
			state.form.is_default = true;
		} else {
			state.form.is_default = false;
		}
	}

	function save() {
		console.log('表单提交', state.form);
		if (formVerifi()) {
			console.log('表单验证通过');
			request.post('memberpayment/save', state.form).then(res => {
				console.log('新增/修改银行卡', res);
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/users/withdraw/account"
						})
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					});
				}
			})
		}
	}

	function formVerifi() {
		if (!state.form.username) {
			uni.showToast({
				title: '请填写持卡人姓名',
				icon: "none"
			})
			return false;
		}
		if (!state.form.mobile) {
			uni.showToast({
				title: '请填写联系电话',
				icon: "none"
			})
			return false;
		}
		if (!state.form.account) {
			uni.showToast({
				title: '请填写银行卡号',
				icon: "none"
			})
			return false;
		}
		if (!state.form.bank_name) {
			uni.showToast({
				title: '请填写开户行',
				icon: "none"
			})
			return false;
		}
		if (!state.form.bank_branch) {
			uni.showToast({
				title: '请填写支行名称',
				icon: "none"
			})
			return false;
		}
		return true;
	}

	function radioChange(e) {
		// console.log('账户类型', e);
		state.form.account_type = e.detail.value;
	}

	// 选择图片上传上传
	function selectImage(e) {
		console.log('选择文件：', e);
		const uploadTask = uni.uploadFile({
			url: web_host + '/api/common.uploadfile/upload', // 开发者服务器接口地址
			filePath: e.tempFilePaths[0], // 要上传文件资源的路径
			name: 'file', // 文件对应的 key
			formData: {
				'user': 'test'
			}, // 请求的 form data
			success: (uploadFileRes) => {
				// console.log(uploadFileRes.data);
				const data = JSON.parse(uploadFileRes.data);
				console.log('上传成功', data);
				// 处理上传成功的结果
				if (data.status == 'done') {
					if (form.account_type == 0) {
						state.form.pay_card_image = data.domainUrl;
					} else if (form.account_type == 1) {
						state.form.wechat_qr_code = data.domainUrl;
					} else if (form.account_type == 2) {
						state.form.alipay_qr_code = data.domainUrl;
					}
				}
			},
			fail: (error) => {
				console.error('上传失败', error);
				// 处理上传失败的错误
				uni.showToast({
					title: '网络错误，请稍后再试！',
					icon: fail,
					duration: 2000
				})
			}
		});
	}

	// 上传成功
	function uploadSuccess(e) {
		console.log('上传成功', e);
		if (form.account_type == 0) {
			uni.showToast({
				title: '银行卡上传成功！',
				icon: 'success'
			})
		} else if (form.account_type == 1) {
			uni.showToast({
				title: '微信收款码上传成功！',
				icon: 'success'
			})
		} else if (form.account_type == 2) {
			uni.showToast({
				title: '支付宝收款码上传成功！',
				icon: 'success'
			})
		}
	}

	// 上传失败
	function uploadFail(e) {
		console.log('上传失败：', e);
		if (form.account_type == 0) {
			uni.showToast({
				title: '银行卡上传失败！',
				icon: 'fail'
			})
		} else if (form.account_type == 1) {
			uni.showToast({
				title: '微信收款码上传失败！',
				icon: 'fail'
			})
		} else if (form.account_type == 2) {
			uni.showToast({
				title: '支付宝收款码上传失败！',
				icon: 'fail'
			})
		}
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	const {
		themeColor,
		accountType,
		form,
		account_id,
		cardImage,
		wechatImage,
		alipayImage,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}

	.address-form {
		padding: $margin-24;
		box-sizing: border-box;

		.form {
			min-height: 91vh;
			padding: 0 $margin-24;
			background-color: $bg-inverse-color;
			border-radius: $radius-16;

			.form-item {
				@include f-between;
				padding: $margin-32 0;
				border-bottom: 1rpx solid mix(#fff, $border-color, 50%);

				.label {
					width: 180rpx;

					&.default {
						width: 180rpx;
					}

					.star {
						color: #ff0000;
					}
				}

				.form-input {
					@include f-between;
					flex: 1;

					.radio {
						font-size: 24rpx;

						radio {
							transform: scale(0.8);
						}
					}

					.input-val {
						flex: 1;
					}

					::v-deep .input-value-border {
						border: none;
						border-radius: 0;

						.placeholder {
							font-size: $font-28;
						}

						.input-arrow {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.switch {
					transform: scale(0.9);
				}
			}
		}

		.btn-submit {
			// margin-top: $margin-36;
			padding: $margin-24;

			.c-button {
				margin-bottom: $margin-24;
			}
		}
	}
</style>